<template>
  <scroll-view
    class="maintenance-hall-list"
    scroll-y
    @scrolltolower="scroll"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <view
      class="maintenance-hall-list-item"
      :class="'type-' + item.approveStatus"
      v-for="(item, index) in data"
      :key="index"
    >
      <!--       @click="itemClick(item)" -->
      <view class="header">
        <view class="item-dt">
          <view class="dt-l">
            <p class="name u-line-1">{{ item.moldCode }}</p>
            <p class="name u-line-1">{{ item.moldName }}</p>
          </view>
          <view class="dt-r">
            <u-tag type="success" text="维修确认" v-if="navIndex == 1"></u-tag>
            <u-tag
              type="success"
              text="待模修确认"
              v-if="navIndex == 2"
            ></u-tag>
            <u-tag
              type="success"
              text="待品质确认"
              v-if="navIndex == 3"
            ></u-tag>
            <u-tag type="success" text="送修确认" v-if="navIndex == 4"></u-tag>
            <u-tag type="success" text="待分配" v-if="navIndex == 5"></u-tag>
            <u-tag type="success" text="维修中" v-if="navIndex == 6"></u-tag>
            <u-tag type="success" text="待验收" v-if="navIndex == 7"></u-tag>
            <u-tag type="success" text="已结单" v-if="navIndex == 8"></u-tag>
            <u-tag type="success" text="升级中" v-if="navIndex == 10"></u-tag>
          </view>
        </view>
        <view class="type-list">
          <view
            class="type-list-item"
            style="background-color: #fff1f0; color: #e03e55"
            >{{
              item.urgencyLevel == 1
                ? "特急"
                : item.urgencyLevel == 2
                ? "紧急"
                : "一般"
            }}</view
          >
          <view
            class="type-list-item"
            style="background-color: #f1f7fd; color: #187bde"
            >{{ navIndex == 10 ? "已升级" : "未升级" }}</view
          >
          <view
            class="type-list-item"
            style="background-color: #fff2e8; color: #fa541c"
            v-if="item.abnormalPhenomena.includes('模具异常')"
            >模具异常</view
          >
          <view
            class="type-list-item"
            style="background-color: #fff2e8; color: #fa541c"
            v-if="item.abnormalPhenomena.includes('品质异常')"
            >品质异常</view
          >
          <view
            class="type-list-item"
            style="background-color: #fff2e8; color: red"
            >{{ item.effectProduct ? "影响生产" : "不影响生产" }}</view
          >
        </view>
      </view>

      <view class="main-box">
        <view class="item-dd">
          <text class="label">维修单号:</text>
          <text class="value">{{ item.repairOrderNo }}</text>
        </view>
        <view class="item-dd">
          <text class="label">班组:</text>
          <text class="value">{{ item.team }}</text>
        </view>
        <view class="item-dd">
          <text class="label">班次:</text>
          <text class="value">{{ item.shift }}</text>
        </view>
        <view class="item-dd">
          <text class="label">具体位置:</text>
          <text class="value">{{ item.punchNumber }}</text>
        </view>
        <view class="item-dd">
          <text class="label">异常现象:</text>
          <text class="value">{{ item.abnormalPhenomena }}</text>
        </view>
        <view class="item-dd">
          <text class="label">异常描述:</text>
          <text class="value">{{ item.exceptionDescription }}</text>
        </view>
        <view class="img-box">
          <img
            :src="item.fileUrl"
            v-for="item in item.uploadAttachments"
            :key="item.fileUrl"
          />
        </view>
        <view class="item-dd">
          <text class="label">故障时间</text>
          <text class="value">{{ item.faultTime }}</text>
        </view>
      </view>

      <view class="footer-btn">
        <template v-if="navIndex == 1">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceEdit')"
            @click="toPath(item, '/pages/mold/applyRepair/index?id=' + item.id)"
            text="编辑"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceDel')"
            @click="handleDeleteModal(item)"
            text="删除"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('1moldServiceConfirm')"
            @click="
              toPath(
                item,
                '/pages/mold/maintenance-hall/mold-confirmation?type=1'
              )
            "
            text="确认"
          ></u-button>
        </template>
        <template v-if="navIndex == 2">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('1moldServiceRej')"
            @click="handleCommonReject(item.id, '2', 'maintainRejectDesc')"
            text="驳回"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('2moldServiceConfirm')"
            @click="
              toPath(
                item,
                '/pages/mold/maintenance-hall/mold-confirmation?type=2'
              )
            "
            text="确认"
          ></u-button>
        </template>
        <template v-if="navIndex == 3">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('2moldServiceRej')"
            @click="handleCommonReject(item.id, '3', 'MQualityRejectReason')"
            text="驳回"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('3moldServiceConfirm')"
            @click="
              handleCommonReject(
                item.id,
                '3-confirm',
                'mQualityExceptionDesc',
                true
              )
            "
            text="确认"
          ></u-button>
        </template>

        <template v-if="navIndex == 4">
          <template v-if="item.productReveiveTime == null">
            <u-button
              class="btn"
              type="primary"
			  v-if="$has('moldServiceEdit')"
              @click="
                toPath(item, '/pages/mold/applyRepair/index?id=' + item.id)
              "
              text="编辑"
            ></u-button>

            <u-button
              class="btn"
              type="primary"
			  v-if="$has('moldServiceArrive')"
              @click="service(item, '4-arrive')"
              text="确认送达"
            ></u-button>
          </template>
          <template v-else>
            <u-button
              class="btn"
              type="primary"
			  v-if="$has('3moldServiceRej')"
              @click="handleCommonReject(item.id, '3', 'MQualityRejectReason')"
              text="驳回"
            ></u-button>
            <u-button
              class="btn"
              type="primary"
			  v-if="$has('moldServiceRec')"
              @click="service(item, '4-confirm')"
              text="确认收货"
            ></u-button>
          </template>
        </template>

        <template v-if="navIndex == 5">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceBrforeDispath')"
            @click="brforeDispath(item)"
            text="分配"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceService')"
            @click="service(item, '5')"
            text="接单"
          ></u-button>
        </template>

        <template v-if="navIndex == 6">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceTrans')"
            @click="brforeDispath(item, true)"
            text="转单"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceConfirm')"
            @click="handleConfirmOrder(item)"
            text="维修完成"
          ></u-button>
        </template>

        <template v-if="navIndex == 7">
			<!-- @click="service(item, '7-accept')" -->
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceAccept')"
			@click="handleAccept(item)"
            text="验收"
          ></u-button>
        </template>
        <template v-if="navIndex == 10">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceBrforeDispath')"
            @click="brforeDispath(item)"
            text="分配"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldServiceService')"
            @click="service(item, '5')"
            text="接单"
          ></u-button>
        </template>
      </view>
    </view>
    <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
    <MyModal
      v-model="show"
      :title="modalTitle"
      :content="content"
      @confirm="confirm"
      ref="uModal"
      :showCancelButton="true"
      @cancel="cancelModal"
    ></MyModal>
  </scroll-view>
</template>

<script>
import MyModal from "@/components/myModal";
import { getUserInfo, setPageData } from "@/store/user";
import fetch from "@/utils/fetch";
export default {
  components: { MyModal },
  props: {
    data: {
      type: Array,
      default: [],
    },
    navIndex: {
      type: Number,
      default: 1,
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: true,
      noData: false,
      userInfo: {},
      triggered: false,
      show: false,
      modalTitle: "",
      content: "",
      obj: "",
      myUrl: "",
      selectIds: [],
      showResult: false,
    };
  },
  onReady: async function () {
    this.userInfo = await getUserInfo();
  },
  created() {},
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  methods: {
    //删除
    handleDeleteModal(item) {
      const that = this;
      that.deleteShow = true;
      that.$tips("提示", "是否确认刪除？", function (res) {
        if (res.confirm) {
          that.$loading.open();
          fetch("post", "/dms/moldMaintenanceHall/delete", {
            id: item.id,
          }).then((res) => {
            if (res.code === 200) {
              uni.$emit("openToast", {
                type: "success",
                title: "刪除成功",
                complete() {
                  that.deleteShow = false;
                  that.detailId = "";
                  that.$emit("onRefresh");
                },
              });
              // this.getCountsList();
            }
          });
        }
      });
    },
    // 确认查看详情
    handleConfirmOrder(order) {
      const that = this;
      setPageData(order);
      uni.navigateTo({
        url:
          "/pages/mold/maintenance-hall/repair-completed?id=" +
          order.id +
          "&status=" +
          that.navIndex,
        animationType: "pop-in",
      });
    },
    handleAccept(order) {
      const that = this;
      setPageData(order);
      uni.navigateTo({
        url:
          "/pages/mold/maintenance-hall/accept?id=" +
          order.id +
          "&status=" +
          that.navIndex,
        animationType: "pop-in",
      });
    },
    handleCommonReject(id, status, key, type) {
      let obj = {
        url: "",
        desc: "",
        key: key,
        type,
        id,
      };
      if (status == "2") {
        obj.url = "/dms/moldMaintenanceHall/repairReject";
        obj.desc = "模具异常情况描述";
      } else if (status == "3") {
        obj.url = "/dms/moldMaintenanceHall/mQualityReject";
        obj.desc = "驳回原因";
      } else if (status == "3-confirm") {
        obj.url = "/dms/moldMaintenanceHall/mQualityConfirm";
        obj.desc = "品质异常情况描述";
      }
      this.toPath(obj, "/pages/mold/maintenance-hall/reject");
    },
    toPath(data, path) {
      setPageData(data);
      uni.navigateTo({
        url: path,
        animationType: "pop-in",
      });
    },
    brforeDispath(order, status) {
      console.log("order.workOrderSource", order.workOrderSource);
      if (order.workOrderSource === 1) {
        this.beforeRevice(order, status);
      } else {
        this.handleDispath(order, status);
      }
    },
    async beforeRevice(order, target) {
      if (order.workOrderSource === 1) {
        uni.$emit("openToast", {
          type: "error",
          title: "填写设备!",
        });
        // }
      } else {
        this.handleRecive(order, target);
      }
    },
    //接
    handleRecive(order, deviceMId) {
      let params = {
        workOrderId: order.id,
        userId: userInfo.userId,
        workOrderStatus: order.workOrderStatus,
        platform: 1,
      };

      if (deviceMId) {
        params["deviceMId"] = deviceMId;
      }
      that.$loading.open();
      fetch("get", "/dms/workOrder/receiveOrDistribution", params)
        .then((res) => {
          // this.$router.push({
          //     path: "/fault/statement/workOrderDetail",
          //     query: {
          //       id: order.id,
          //       status: 2,
          //     },
          //   });
        })
        .finally(() => {
          // this.$refs.orderDetailModal.show(order.id, '2')
          // const userId = localStorage.getItem('ziyunFactoryUserId')
        });
    },
    //分配
    handleDispath(order, status) {
      this.obj = order;
      setPageData(order);
      uni.navigateTo({
        url: "/pages/mold/maintenance-hall/operator?showResult=" + status,
        animationType: "pop-in",
      });
    },
    service(data, status) {
      this.obj = data;
      let url, desc, title;
      if (status == "4-arrive") {
        url = "/dms/moldMaintenanceHall/productReveiveConfirm";
        desc = "确认已将模具送达指定维修地点！";
        title = "送达提醒";
      } else if (status == "4-confirm") {
        url = "/dms/moldMaintenanceHall/repairReveiveConfirm";
        desc = "确认已收到模具，并开始进行维修！";
        title = "收货提醒";
      } else if (status == "5") {
        url = "/dms/moldMaintenanceHall/receive";
        desc = "是否接单请确认!";
        title = "接单提醒";
      }else if(status == "7-accept"){
		  url = "/dms/moldMaintenanceHall/accept";
		  desc = "是否验收请确认!";
		  title = "验收提醒";
	  }
      this.myUrl = url;
      this.modalTitle = title;
      this.content = desc;
      this.show = true;
    },
    confirm() {
      const that = this;
      that.show = false;
      that.$loading.open();
      console.log(" this.obj", that.obj);
      fetch("post", that.myUrl, { id: that.obj.id }).then((res) => {
        uni.$emit("openToast", {
          type: "success",
          title: "操作成功",
          complete() {
            that.$emit("onRefresh");
          },
        });
      });
    },
    cancelModal() {
      this.show = false;
    },
    setLoading(val) {
      this.loading = val;
    },
    scroll(e) {
      const that = this;
      if (!that.noData) {
        this.loading = true;
        this.$emit("scrollBottom", (val) => {
          that.noData = val;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        });
      }
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.maintenance-hall-list {
  height: 100%;
  padding: 0 20rpx;

  .maintenance-hall-list-item {
    padding-top: 16rpx;
    background-color: #fff;
    box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;

    .item-dt {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 27rpx;

      .name {
      }

      .view {
        color: #83b4ff;
      }
      .dt-l {
        flex: 1;
        margin-right: 10px;
      }
      .dt-r {
        min-width: 70px;
        text-align: center;
        display: flex;
        justify-content: center;
        // border: 1px solid #e0e0e0;
        // padding: 3px 5px;
        // border-radius: 5px;
        // color: #d7d4d4;
        // font-size: 14px;
      }
    }
    .type-list {
      display: flex;
      flex-wrap: wrap;
      .type-list-item {
        font-size: 14px;
        padding: 3px 10px;
        border: 1px solid #e0e0e0;
        margin-right: 10px;
        border-radius: 5px;
        white-space: nowrap;
        margin-bottom: 5px;
      }
      .color0 {
        background-color: #f7cccc;
        color: red;
      }
    }
    .header {
      padding: 0 30rpx 10px 30rpx;
      border-bottom: 1px solid #e0e0e0;
    }

    .main-box {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #e0e0e0;
      .item-dd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 22rpx;

        .label {
          margin-right: 20rpx;
          font-size: 28rpx;
          width: 120rpx;
          min-width: 120rpx;
        }

        .value {
          font-size: 28rpx;
          flex: 1;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          color: #666;
        }

        .btn {
          width: 170rpx;
          min-width: 170rpx;
          margin-left: 29rpx;
          height: 60rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }
  .img-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    img {
      width: 100px;
      margin: 0;
      margin-right: 27rpx;
      margin-bottom: 27rpx;
    }
  }

  .footer-btn {
    display: flex;
    padding: 20rpx;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 80px;
      margin: 0;
      height: 32px;
      line-height: 32px;
      margin-right: 10rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .scroll-no-data {
    text-align: center;
  }
}
</style>
